<template>
  <div class="demo">
    <div class="demo-title">白底模式</div>
    <div class="demo-content">
      <PageHeader
        :ghost="false"
        title="Title"
        sub-title="This is a subtitle"
        @back="() => $router.go(-1)"
      >
        <template #extra>
          <Button key="3">Operation</Button>
          <Button key="2">Operation</Button>
          <Button key="1" type="primary">Primary</Button>
        </template>
        <Descriptions size="small" :column="3">
          <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
          <Descriptions.Item label="Association">
            <a>421421</a>
          </Descriptions.Item>
          <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
          <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
          <Descriptions.Item label="Remarks">
            Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
          </Descriptions.Item>
        </Descriptions>
      </PageHeader>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Button from '@sscd/button';
  import Descriptions from '@sscd/descriptions';
  import PageHeader from '@sscd/page-header';
</script>

<style lang="less" scoped>
  .demo {
    padding: 24px;
    background-color: #f2f2f2;
    :deep(tr:last-child td) {
      padding-bottom: 0;
    }
  }
</style>
